<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英你而来 - 登录</title>
    
    <!-- 引入组件 -->
    <script src="assets/components/BaseButton.js"></script>
    <script src="assets/components/BaseSMSButton.js"></script>
    
    <style>
        /* 基础变量 */
        :root {
            /* 主色调 */
            --primary-deep-blue: #1a56db;
            --primary-darker-blue: #0e3a9e;
            --primary-light-blue: #ebf5ff;
            
            /* 中性色 */
            --neutral-white: #ffffff;
            --neutral-light-gray: #f8fafc;
            --neutral-border: #e2e8f0;
            --neutral-medium-gray: #94a3b8;
            --neutral-dark-text: #1e293b;
            
            /* 功能色 */
            --success-green: #10b981;
            --warning-yellow: #f59e0b;
            --error-red: #ef4444;
            --info-blue: #3b82f6;
            
            /* 尺寸 */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-full: 9999px;
            
            --space-xs: 4px;
            --space-sm: 8px;
            --space-md: 16px;
            --space-lg: 24px;
            --space-xl: 32px;
            --space-2xl: 48px;
            
            --font-size-xs: 12px;
            --font-size-sm: 14px;
            --font-size-base: 16px;
            --font-size-lg: 18px;
            --font-size-xl: 20px;
            --font-size-2xl: 24px;
            --font-size-3xl: 32px;
            
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
            
            /* 阴影 */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            
            /* 过渡效果 */
            --transition-fast: 0.15s;
            --transition-normal: 0.3s;
            --transition-slow: 0.5s;
        }
        
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 1.5;
            color: var(--neutral-dark-text);
            background-color: var(--neutral-light-gray);
        }
        
        button, input, textarea {
            font-family: inherit;
            font-size: inherit;
        }
        
        /* 登入容器 */
        #login-wrapper {
            display: flex;
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--neutral-light-gray);
            overflow: hidden;
        }
        
        /* 背景區域 - 左側54% */
        .login-background {
            flex: 1;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--neutral-dark-text);
            position: relative;
            overflow: hidden;
        }
        
        /* 装饰文字 */
        .decoration-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .deco-text {
            position: absolute;
            font-size: 120px;
            font-weight: 100;
            color: rgba(64, 158, 255, 0.08);
            user-select: none;
            animation: floatText 20s infinite linear;
        }
        
        @keyframes floatText {
            0% { transform: translateY(0px) rotate(0deg); }
            25% { transform: translateY(-10px) rotate(1deg); }
            50% { transform: translateY(0px) rotate(0deg); }
            75% { transform: translateY(10px) rotate(-1deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
        
        .background-content {
            text-align: center;
            max-width: 500px;
            padding: 40px;
            position: relative;
            z-index: 2;
        }
        
        .system-title {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 16px;
            letter-spacing: 2px;
            color: var(--primary-deep-blue);
        }
        
        .system-subtitle {
            font-size: 20px;
            margin-bottom: 60px;
            font-weight: 300;
            letter-spacing: 1px;
            color: var(--neutral-medium-gray);
        }
        
        /* 功能节点网络 */
        .feature-network {
            position: relative;
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
        
        .connection-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .connection-line {
            transition: all 0.3s ease;
            filter: drop-shadow(0 0 5px rgba(64, 158, 255, 0.5));
        }
        
        .connection-line.highlighted {
            stroke-width: 3;
            stroke: var(--primary-deep-blue) !important;
            filter: drop-shadow(0 0 8px rgba(64, 158, 255, 0.6));
        }
        
        .data-flow {
            opacity: 0.9;
            transition: all 0.3s ease;
        }
        
        .data-flow.highlighted {
            opacity: 1;
            r: 4;
            filter: drop-shadow(0 0 8px rgba(64, 158, 255, 1));
        }
        
        /* 功能节点 */
        .feature-node {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: grab;
            animation: nodeAppear 0.8s ease-out forwards;
            z-index: 2;
            user-select: none;
            transition: transform 0.2s ease;
        }
        
        .feature-node:hover {
            transform: translate(-50%, -50%) scale(1.05) !important;
        }
        
        .node-circle {
            position: relative;
            width: 60px;
            height: 60px;
            margin-bottom: 12px;
        }
        
        .node-core {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary-deep-blue), var(--primary-darker-blue));
            border-radius: 50%;
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
        }
        
        .node-pulse {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border: 2px solid var(--primary-deep-blue);
            border-radius: 50%;
            opacity: 0.8;
            animation: pulse 2s infinite;
        }
        
        .node-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--neutral-dark-text);
            text-align: center;
            white-space: nowrap;
            transition: all 0.3s ease;
        }
        
        .feature-node:hover .node-label {
            color: var(--primary-deep-blue);
        }
        
        @keyframes nodeAppear {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }
            60% {
                opacity: 0.8;
                transform: translate(-50%, -50%) scale(1.1);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }
        
        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.8;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 0.5;
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.8;
            }
        }
        
        /* 登入表單區域 - 右側46% */
        #login-form-container {
            width: 36%;
            background: var(--primary-deep-blue);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px;
            position: relative;
        }
        
        .glass-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.95) 0%,
                rgba(255, 255, 255, 0.85) 50%,
                rgba(255, 255, 255, 0.9) 100%);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            z-index: -1;
        }
        
        .form-title {
            font-size: 32px;
            font-weight: 700;
            color: var(--primary-deep-blue);
            margin-bottom: 8px;
            letter-spacing: 1px;
            text-align: center;
        }
        
        .form-subtitle {
            font-size: 16px;
            color: var(--neutral-medium-gray);
            margin-bottom: 32px;
            text-align: center;
        }
        
        /* 登录方式切换标签 - 圆形样式 */
        .login-type-tabs {
            display: flex;
            background: white;
            border-radius: 50px;
            padding: 6px;
            margin-bottom: 48px;
            margin-top: -16px;
            position: relative;
            width: 280px;
            margin-left: auto;
            margin-right: auto;
            box-shadow: var(--shadow-sm);
        }
        
        .tab-slider {
            position: absolute;
            top: 6px;
            left: 6px;
            width: calc(50% - 6px);
            height: calc(100% - 12px);
            background: var(--primary-deep-blue);
            border-radius: 50px;
            box-shadow: var(--shadow-md);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }
        
        .tab-slider.tab-slider--sms {
            transform: translateX(100%);
        }
        
        .tab-button {
            flex: 1;
            padding: 12px 20px;
            border: none;
            background: transparent;
            color: var(--neutral-medium-gray);
            font-size: 15px;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
            text-align: center;
        }
        
        .tab-button.active {
            color: var(--neutral-white);
            font-weight: 700;
        }
        
        /* 按钮样式 */
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: var(--radius-lg);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: all var(--transition-normal);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-sm);
        }
        
        .btn-primary {
            background: var(--primary-deep-blue);
            color: var(--neutral-white);
            box-shadow: var(--shadow-sm);
        }
        
        .btn-primary:hover {
            background: var(--primary-darker-blue);
            box-shadow: var(--shadow-md);
            transform: translateY(-1px);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        .btn-outline {
            background: transparent;
            color: var(--primary-deep-blue);
            border: 2px solid var(--primary-deep-blue);
        }
        
        .btn-outline:hover {
            background: var(--primary-deep-blue);
            color: var(--neutral-white);
        }
        
        .btn-large {
            padding: 16px 32px;
            font-size: var(--font-size-lg);
            width: 100%;
        }
        
        .btn-small {
            padding: 8px 16px;
            font-size: var(--font-size-sm);
            min-width: 90px;
        }
        
        /* 确保输入框容器支持绝对定位的SMS按钮 */
        .edu-input-wrapper {
            position: relative;
        }
        
        /* 为SMS按钮预留空间 */
        #codeInput {
            padding-right: 100px !important;
        }
        
        /* 组件按钮在蓝色背景下的样式调整 */
        #login-form-container .edu-button--primary {
            background: var(--primary-deep-blue) !important;
            color: white !important;
            border-radius: var(--radius-lg) !important;
        }
        
        #login-form-container .edu-button--primary:hover {
            background: var(--primary-darker-blue) !important;
            transform: translateY(-1px) !important;
        }
        
        /* 链接按钮样式覆盖 */
        #login-form-container .link-button {
            background: none !important;
            border: none !important;
            color: var(--neutral-medium-gray) !important;
            font-size: var(--font-size-sm) !important;
            cursor: pointer !important;
            transition: color var(--transition-normal) !important;
            box-shadow: none !important;
            padding: 8px 16px !important;
        }
        
        #login-form-container .link-button:hover {
            color: var(--primary-deep-blue) !important;
            background: none !important;
            transform: none !important;
        }
        
        /* 协议勾选区域 */
        .agreement-section {
            margin: 20px 0;
            text-align: center;
        }
        
        .agreement-checkbox {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
            color: var(--neutral-medium-gray);
        }
        
        /* 自定义勾选框样式 - 蓝色背景白色勾号 */
        .agreement-checkbox input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border: 2px solid var(--neutral-border);
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            background: white;
            transition: all 0.3s ease;
        }
        
        .agreement-checkbox input[type="checkbox"]:checked {
            background: var(--primary-deep-blue);
            border-color: var(--primary-deep-blue);
        }
        
        .agreement-checkbox input[type="checkbox"]:checked::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
        }
        
        .agreement-checkbox input[type="checkbox"]:hover {
            border-color: var(--primary-deep-blue);
        }
        
        .agreement-text {
            line-height: 1.4;
        }
        
        .agreement-link {
            color: var(--primary-deep-blue);
            text-decoration: none;
            cursor: pointer;
            transition: color 0.3s ease;
        }
        
        .agreement-link:hover {
            color: var(--primary-darker-blue);
            text-decoration: underline;
        }
        
        /* 底部链接 */
        .form-footer {
            text-align: center;
            margin-top: var(--space-xl);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-lg);
        }
        
        .link-button {
            background: none;
            border: none;
            color: var(--neutral-medium-gray);
            font-size: var(--font-size-sm);
            cursor: pointer;
            transition: color var(--transition-normal);
        }
        
        .link-button:hover {
            color: var(--primary-deep-blue);
        }
        
        .separator {
            color: var(--neutral-border);
        }
        
        /* 响应式设计 */
        @media (max-width: 1024px) {
            #login-wrapper {
                flex-direction: column;
            }
            
            .login-background {
                min-height: 35vh;
            }
            
            #login-form-container {
                width: 100%;
                min-height: 65vh;
            }
            
            .system-title {
                font-size: 36px;
            }
            
            .feature-network {
                width: 300px;
                height: 220px;
            }
        }
        
        @media (max-width: 768px) {
            .login-background {
                min-height: 30vh;
            }
            
            #login-form-container {
                padding: 20px;
                min-height: 70vh;
            }
            
            .system-title {
                font-size: 28px;
            }
            
            .feature-network {
                width: 250px;
                height: 180px;
            }
            
            .node-circle {
                width: 50px;
                height: 50px;
            }
            
            .node-core {
                width: 32px;
                height: 32px;
            }
        }
        
        /* 隐藏非激活的表单 */
        .form-content {
            display: none;
        }
        
        .form-content.active {
            display: block;
        }
        
        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 输入框样式 */
        .edu-input-container {
            margin-bottom: var(--space-md);
        }
        
        .edu-input-label {
            display: block;
            margin-bottom: var(--space-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--neutral-dark-text);
        }
        
        .edu-input-wrapper {
            position: relative;
        }
        
        .edu-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--neutral-border);
            border-radius: var(--radius-md);
            background-color: var(--neutral-white);
            font-size: var(--font-size-base);
            color: var(--neutral-dark-text);
            transition: all var(--transition-fast);
        }
        
        .edu-input:focus {
            border-color: var(--primary-deep-blue);
            outline: none;
            box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.2);
        }
        
        .edu-input-error {
            border-color: var(--error-red);
        }
        
        .edu-input-error-message {
            margin-top: var(--space-xs);
            color: var(--error-red);
            font-size: var(--font-size-sm);
            display: block;
        }
    </style>
</head>
<body>
    <div id="login-wrapper">
        <!-- 背景區域 -->
        <div class="login-background">
            <!-- 装饰文字 -->
            <div class="decoration-text">
                <div class="deco-text" style="top: 15%; left: 10%; transform: rotate(-5deg);">English</div>
                <div class="deco-text" style="top: 40%; right: 15%; transform: rotate(10deg);">Learning</div>
                <div class="deco-text" style="bottom: 20%; left: 20%; transform: rotate(-15deg);">Platform</div>
                <div class="deco-text" style="bottom: 30%; right: 10%; transform: rotate(5deg);">Study</div>
            </div>
            
            <div class="background-content">
                <h1 class="system-title">英你而来</h1>
                <p class="system-subtitle">English Learning Platform</p>
                
                <!-- 功能节点网络 -->
                <div class="feature-network">
                    <!-- 功能节点 -->
                    <div class="feature-node" style="top: 20%; left: 20%;">
                        <div class="node-circle">
                            <div class="node-core"></div>
                            <div class="node-pulse"></div>
                        </div>
                        <div class="node-label">题库系统</div>
                    </div>
                    
                    <div class="feature-node" style="top: 30%; left: 50%;">
                        <div class="node-circle">
                            <div class="node-core"></div>
                            <div class="node-pulse"></div>
                        </div>
                        <div class="node-label">AI辅助</div>
                    </div>
                    
                    <div class="feature-node" style="top: 60%; left: 30%;">
                        <div class="node-circle">
                            <div class="node-core"></div>
                            <div class="node-pulse"></div>
                        </div>
                        <div class="node-label">学习记录</div>
                    </div>
                    
                    <div class="feature-node" style="top: 45%; left: 80%;">
                        <div class="node-circle">
                            <div class="node-core"></div>
                            <div class="node-pulse"></div>
                        </div>
                        <div class="node-label">讨论区</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 登入表單區域 -->
        <div id="login-form-container">
            <div class="glass-background"></div>
            
            <!-- 表单标题 -->
            <div class="form-header">
                <h2 class="form-title">欢迎登录</h2>
                <p class="form-subtitle">请选择登录方式</p>
                
                <!-- 登录方式切换 -->
                <div class="login-type-tabs">
                    <div class="tab-slider" id="tabSlider"></div>
                    <button class="tab-button active" onclick="switchLoginType('password')">账号密码登录</button>
                    <button class="tab-button" onclick="switchLoginType('sms')">验证码登录</button>
                </div>
            </div>
            
            <!-- 密码登录表单 -->
            <div id="passwordForm" class="form-content active fade-in">
                <!-- 用户名输入框 -->
                <div class="edu-input-container" id="usernameInputContainer">
                    <label class="edu-input-label">用户名</label>
                    <div class="edu-input-wrapper">
                        <input type="text" class="edu-input" id="usernameInput" placeholder="请输入用户名">
                    </div>
                    <span class="edu-input-error-message" id="usernameInputError" style="display: none;"></span>
                </div>
                
                <!-- 密码输入框 -->
                <div class="edu-input-container" id="passwordInputContainer">
                    <label class="edu-input-label">密码</label>
                    <div class="edu-input-wrapper">
                        <input type="password" class="edu-input" id="passwordInput" placeholder="请输入密码">
                    </div>
                    <span class="edu-input-error-message" id="passwordInputError" style="display: none;"></span>
                </div>
            </div>
            
            <!-- 验证码登录表单 -->
            <div id="smsForm" class="form-content">
                <!-- 邮箱输入框 -->
                <div class="edu-input-container" id="emailInputContainer">
                    <label class="edu-input-label">邮箱</label>
                    <div class="edu-input-wrapper">
                        <input type="email" class="edu-input" id="emailInput" placeholder="请输入邮箱地址">
                    </div>
                    <span class="edu-input-error-message" id="emailInputError" style="display: none;"></span>
                </div>
                
                <!-- 验证码输入框 -->
                <div class="edu-input-container" id="codeInputContainer">
                    <label class="edu-input-label">验证码</label>
                    <div class="edu-input-wrapper">
                        <input type="text" class="edu-input" id="codeInput" placeholder="请输入验证码" maxlength="6">
                        <!-- SMS按钮将在这里动态插入 -->
                        <div id="smsButtonContainer"></div>
                    </div>
                    <span class="edu-input-error-message" id="codeInputError" style="display: none;"></span>
                </div>
            </div>
            
            <!-- 协议勾选 -->
            <div class="agreement-section">
                <div class="agreement-checkbox">
                    <input type="checkbox" id="agreementCheck">
                    <label for="agreementCheck" class="agreement-text">
                        我已阅读并同意<a href="#" class="agreement-link">《英你而来服务协议》</a>和<a href="#" class="agreement-link">《隐私政策》</a>
                    </label>
                </div>
            </div>
            
            <!-- 登录按钮 -->
            <div class="form-actions">
                <!-- 登录按钮将在这里动态插入 -->
                <div id="loginButtonContainer"></div>
            </div>
            
            <!-- 底部链接 -->
            <div class="form-footer">
                <!-- 底部按钮将在这里动态插入 -->
                <div id="forgotPasswordContainer" style="display: inline-block;"></div>
                <span class="separator">|</span>
                <div id="registerContainer" style="display: inline-block;"></div>
            </div>
        </div>
    </div>
    
    <script>
        // 全局变量
        let currentLoginType = 'password';
        
        // 组件实例
        let loginButton, smsButton, forgotPasswordButton, registerButton;
        
        // 切换登录方式
        function switchLoginType(type) {
            currentLoginType = type;
            
            // 更新标签样式
            const buttons = document.querySelectorAll('.tab-button');
            const slider = document.getElementById('tabSlider');
            
            buttons.forEach(btn => btn.classList.remove('active'));
            
            if (type === 'password') {
                buttons[0].classList.add('active');
                slider.classList.remove('tab-slider--sms');
                document.getElementById('passwordForm').classList.add('active');
                document.getElementById('smsForm').classList.remove('active');
            } else {
                buttons[1].classList.add('active');
                slider.classList.add('tab-slider--sms');
                document.getElementById('passwordForm').classList.remove('active');
                document.getElementById('smsForm').classList.add('active');
            }
            
            // 添加淡入动画
            const activeForm = document.querySelector('.form-content.active');
            activeForm.classList.remove('fade-in');
            setTimeout(() => {
                activeForm.classList.add('fade-in');
            }, 10);
            
            // 清除错误信息
            clearErrors();
        }
        
        // 清除错误信息
        function clearErrors() {
            document.querySelectorAll('.edu-input-error-message').forEach(el => {
                el.style.display = 'none';
            });
            document.querySelectorAll('.edu-input').forEach(input => {
                input.classList.remove('edu-input-error');
            });
        }
        
        // 显示错误信息
        function showError(inputId, message) {
            const input = document.getElementById(inputId);
            const error = document.getElementById(inputId + 'Error');
            
            if (input && error) {
                input.classList.add('edu-input-error');
                error.textContent = message;
                error.style.display = 'block';
            }
        }
        
        // 验证表单
        function validateForm() {
            clearErrors();
            let isValid = true;
            
            // 检查协议勾选
            if (!document.getElementById('agreementCheck').checked) {
                alert('请先阅读并同意服务协议和隐私政策');
                return false;
            }
            
            if (currentLoginType === 'password') {
                const username = document.getElementById('usernameInput').value.trim();
                const password = document.getElementById('passwordInput').value.trim();
                
                if (!username) {
                    showError('usernameInput', '请输入用户名');
                    isValid = false;
                }
                
                if (!password) {
                    showError('passwordInput', '请输入密码');
                    isValid = false;
                }
            } else {
                const email = document.getElementById('emailInput').value.trim();
                const code = document.getElementById('codeInput').value.trim();
                
                if (!email) {
                    showError('emailInput', '请输入邮箱地址');
                    isValid = false;
                } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                    showError('emailInput', '请输入正确的邮箱格式');
                    isValid = false;
                }
                
                if (!code) {
                    showError('codeInput', '请输入验证码');
                    isValid = false;
                }
            }
            
            return isValid;
        }
        
        // 处理登录
        function handleLogin() {
            if (!validateForm()) return;
            
            loginButton.setText('登录中...');
            loginButton.setDisabled(true);
            
            // 模拟登录请求
            setTimeout(() => {
                if (currentLoginType === 'password') {
                    const username = document.getElementById('usernameInput').value;
                    const password = document.getElementById('passwordInput').value;
                    console.log('密码登录:', { username, password });
                } else {
                    const email = document.getElementById('emailInput').value;
                    const code = document.getElementById('codeInput').value;
                    console.log('验证码登录:', { email, code });
                }
                
                alert('登录成功！');
                
                loginButton.setText('登录');
                loginButton.setDisabled(false);
            }, 2000);
        }
        
        // 发送验证码
        function sendVerificationCode() {
            const email = document.getElementById('emailInput').value.trim();
            
            if (!email) {
                showError('emailInput', '请先输入邮箱地址');
                return;
            }
            
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                showError('emailInput', '请输入正确的邮箱格式');
                return;
            }
            
            console.log('发送验证码到:', email);
            alert('验证码已发送到您的邮箱！');
        }
        
        // 找回密码
        function handleForgotPassword() {
            alert('找回密码功能');
        }
        
        // 注册账号
        function handleRegister() {
            alert('注册功能');
        }
        
        // 初始化组件
        function initializeComponents() {
            // 创建登录按钮
            loginButton = new BaseButton({
                text: '登录',
                type: 'primary',
                size: 'large',
                round: true,
                onClick: handleLogin
            });
            loginButton.element.style.width = '100%';
            document.getElementById('loginButtonContainer').appendChild(loginButton.element);
            
            // 创建SMS验证码按钮
            smsButton = new BaseSMSButton({
                text: '获取验证码',
                countdown: 60,
                onClick: sendVerificationCode
            });
            
            // 将SMS按钮添加到输入框容器中
            const codeWrapper = document.querySelector('#codeInputContainer .edu-input-wrapper');
            if (codeWrapper) {
                codeWrapper.appendChild(smsButton.element);
                
                // 确保SMS按钮在蓝色背景下可见
                smsButton.element.style.background = 'rgba(255, 255, 255, 0.95)';
                smsButton.element.style.color = 'var(--primary-deep-blue)';
                smsButton.element.style.border = '1px solid rgba(26, 86, 219, 0.3)';
                
                // 添加调试信息
                console.log('SMS按钮已创建并添加到DOM');
                
                // 测试按钮点击
                window.testSMSButton = function() {
                    console.log('测试SMS按钮点击');
                    smsButton.element.click();
                };
            }
            
            // 创建底部按钮
            forgotPasswordButton = new BaseButton({
                text: '找回密码',
                type: 'secondary',
                size: 'small',
                onClick: handleForgotPassword
            });
            // 应用链接按钮样式
            forgotPasswordButton.element.className = 'link-button';
            forgotPasswordButton.element.style.background = 'none';
            forgotPasswordButton.element.style.border = 'none';
            forgotPasswordButton.element.style.color = 'var(--neutral-medium-gray)';
            forgotPasswordButton.element.style.fontSize = 'var(--font-size-sm)';
            forgotPasswordButton.element.style.boxShadow = 'none';
            document.getElementById('forgotPasswordContainer').appendChild(forgotPasswordButton.element);
            
            registerButton = new BaseButton({
                text: '注册账号',
                type: 'secondary',
                size: 'small',
                onClick: handleRegister
            });
            // 应用链接按钮样式
            registerButton.element.className = 'link-button';
            registerButton.element.style.background = 'none';
            registerButton.element.style.border = 'none';
            registerButton.element.style.color = 'var(--neutral-medium-gray)';
            registerButton.element.style.fontSize = 'var(--font-size-sm)';
            registerButton.element.style.boxShadow = 'none';
            document.getElementById('registerContainer').appendChild(registerButton.element);
        }
        
        // 初始化事件监听
        function initializeEventListeners() {
            // 回车键登录
            document.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    handleLogin();
                }
            });
            
            // 输入时清除错误
            document.querySelectorAll('.edu-input').forEach(input => {
                input.addEventListener('input', function() {
                    this.classList.remove('edu-input-error');
                    const error = document.getElementById(this.id + 'Error');
                    if (error) {
                        error.style.display = 'none';
                    }
                });
            });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 等待组件库加载完成
            setTimeout(() => {
                initializeComponents();
                initializeEventListeners();
            }, 100);
        });
    </script>
</body>
</html>